import React from 'react';
import { Text, ScrollView, View, Image } from '@ray-js/ray';
import Strings from '@/i18n';
import { Slider, Icon, BottomSheet } from '@ray-js/smart-ui';
import _ from 'lodash';
import { LampColorSlider } from '@ray-js/components-ty-lamp';
import Checkmark from '@tuya-miniapp/icons/dist/svg/Checkmark';
import { Weeks } from '../weeks';
import { Switch } from '../Switch';
import { Cell } from '../Cell';
import styles from './index.module.less';
import res from '../../../public/noiceImage';
import { allList, getCurrentByIndex } from '../SongSet';
import { arrowPath } from '../AlarmList';

const list = allList.map((item, index) => ({
  name: item.name,
  id: index + 1,
  checked: false,
  className: styles.actionSheetItem,
  image: item.image,
}));

export function ClockInfoSet({
  colour = {
    hue: 0,
    saturation: 1000,
    value: 1000,
  },
  voice = 0,
  music = 0,
  setMusic,
  onChange,
  changeVoice,
  weeks = [],
  setWeeks,
  weekRepeat = false,
  setWeekRepeat,
  setScrollEnabled,
}: {
  colour: {
    hue: number;
    saturation: number;
    value: number;
  };
  voice: number;
  music: number;
  weekRepeat: boolean;
  weeks: number[];
  setMusic: (val: number) => void;
  setWeeks: (val: number[]) => void;
  changeVoice: (val: number) => void;
  onChange: (val: { hue: number; saturation: number; value: number }) => void;
  setWeekRepeat: (val: boolean) => void;
  setScrollEnabled: (val: boolean) => void;
}) {
  const [show, setShow] = React.useState(false);

  const currentMuisc = getCurrentByIndex(music);

  const onClose = () => setShow(false);

  return (
    <View className={styles.container}>
      <View>
        <Text className={styles.title}>{Strings.getLang('Repeat')}</Text>
      </View>

      <View>
        <Weeks
          weeks={weeks}
          onChange={weeks => {
            if (weeks.every(week => +week === 0)) {
              setWeekRepeat(false);
            }
            setWeeks(weeks);
          }}
        />
      </View>
      <View
        className={styles.listItem}
        style={{
          marginTop: 30,
        }}
      >
        <Text className={styles.title}>{Strings.getLang('weekRepeat')}</Text>
        <Switch
          showText={false}
          disabled={weeks.every(week => week === 0)}
          value={weekRepeat}
          onValueChange={setWeekRepeat}
        />
      </View>

      <View
        onClick={() => setShow(true)}
        className={styles.listItem}
        style={{
          marginBottom: 24,
        }}
      >
        <Text className={styles.title}>{Strings.getLang('musicTrack')}</Text>
        <View className={styles.botBox}>
          <View className={styles.musicBox}>
            <Image src={currentMuisc?.imageActive} className={styles.musicImage} />
            <Text className={styles.musicName}>{currentMuisc?.name}</Text>
          </View>
          <Icon name={arrowPath} color="#000" />
        </View>
      </View>
      <View>
        <Text className={styles.title}>{Strings.getLang('lightColor')}</Text>
        <LampColorSlider
          value={colour.hue}
          trackStyle={{
            height: '30rpx',
            width: `640rpx`,
            borderRadius: '15rpx',
            marginTop: 20,
          }}
          thumbStyle={{
            height: '50rpx',
            width: '50rpx',
            borderRadius: '27rpx',
            borderColor: 'transparent',
            border: '3rpx solid #fff',
          }}
          onTouchStart={() => {
            setScrollEnabled(false);
          }}
          onTouchEnd={val => {
            setScrollEnabled(true);
            onChange({
              ...colour,
              hue: val,
            });
          }}
        />
      </View>

      <View className={styles.botContainer}>
        <View className={styles.botBox}>
          <View className={styles.botBoxHeader}>
            <Text className={styles.botBoxTitle}>{Strings.getLang('voice')}</Text>
            <Image className={styles.voiceIcon} src={res.voice} />
          </View>

          <View className={styles.botBoxValue}>
            <Text className={styles.botBoxValueText}>{voice}</Text>
            <Text className={styles.botBoxValueUnit}>%</Text>
          </View>

          <View className={styles.botBoxSlider}>
            <Slider
              enableTouch
              maxTrackHeight="12rpx"
              minTrackHeight="12rpx"
              thumbHeight="36rpx"
              thumbWidth="36rpx"
              max={100}
              min={0}
              step={1}
              value={voice}
              maxTrackColor="#DEDFE1"
              minTrackColor="#000"
              thumbColor="#000"
              onBeforeChange={() => {
                setScrollEnabled(false);
              }}
              onAfterChange={value => {
                changeVoice?.(value);
                setScrollEnabled(true);
              }}
              moveEventName="changeVoice"
              style={{
                width: `270rpx`,
              }}
            />
          </View>
        </View>

        <View className={styles.botBox}>
          <View className={styles.botBoxHeader}>
            <Text className={styles.botBoxTitle}>{Strings.getLang('brightness')}</Text>
            <Image className={styles.voiceIcon} src={res.brightness} />
          </View>

          <View className={styles.botBoxValue}>
            <Text className={styles.botBoxValueText}>{colour.value / 10}</Text>
            <Text className={styles.botBoxValueUnit}>%</Text>
          </View>

          <View className={styles.botBoxSlider}>
            <Slider
              enableTouch
              maxTrackHeight="12rpx"
              minTrackHeight="12rpx"
              thumbHeight="36rpx"
              thumbWidth="36rpx"
              max={1000}
              min={0}
              step={10}
              value={colour.value}
              maxTrackColor="#DEDFE1"
              minTrackColor="#000"
              thumbColor="#000"
              onBeforeChange={() => {
                setScrollEnabled(false);
              }}
              onAfterChange={value => {
                onChange({
                  ...colour,
                  value,
                });
                setScrollEnabled(true);
              }}
              style={{
                width: `270rpx`,
              }}
            />
          </View>
        </View>
      </View>

      <BottomSheet show={show} title={Strings.getLang('musicTrack')} onClose={onClose}>
        <ScrollView scrollY className={styles.scrollView}>
          {list.map(item => {
            const isSelected = item.id === music;
            return (
              <Cell
                key={item.id}
                title={item.name}
                icon={item.image}
                border
                onClick={() => {
                  setMusic(item.id);
                }}
              >
                {isSelected ? <Icon name={Checkmark} color="#43A939" size="42rpx" /> : null}
              </Cell>
            );
          })}
        </ScrollView>
      </BottomSheet>
    </View>
  );
}
